<template>
    <div>
      <main-layout>
        <template v-slot:top>
          <el-form ref="searchForm" :inline="true" :model="searchInfo">
         
            <el-form-item label="名称">
              <el-input v-model="searchInfo.serviceName" placeholder="名称" clearable />
            </el-form-item>
            <el-form-item label="会员电话">
              <el-input v-model="searchInfo.memberPhone" placeholder="电话" clearable />
            </el-form-item>
            <el-form-item label="时间">
            <el-date-picker v-model="time" type="datetimerange" range-separator="至" start-placeholder="开始时间"
              end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss"/>
            </el-form-item>
            <!-- <el-form-item label="状态">
              <el-select v-model="searchInfo.publishState" clearable placeholder="请选择状态" style="width: 140px;">
                <el-option :value="0" label="全部" />
                <el-option :value="1" label="启用" />
                <el-option :value="2" label="停用" />
              </el-select>
            </el-form-item> -->
  
            <el-form-item>
              <el-button size="small" type="primary" icon="search" @click="onSubmit">查询</el-button>
              <el-button size="small" icon="refresh" @click="onReset">重置</el-button>
            </el-form-item>
          </el-form>
        </template>
  
        <c-table ref="tableRef" :page="{ pageSize, pageIndex, total }" :lists="tableData" @current-change="handleCurrentChange"
          @size-change="handleSizeChange" :loading="loading" :sequence="false" @selection-change="selectionChange" rowKey="id" selectKey='id'>
          <el-table-column align="left" label="名称" min-width="130" prop="serviceName" />
          <el-table-column align="center" label="会员" min-width="130" prop="">
            <template #default="scope">
                {{ scope.row.memberName }} / {{ scope.row.memberPhone }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="会员住址" min-width="80" prop="memberAddress" />
          <el-table-column align="center" label="所属栏目" min-width="80" prop="categoryName" />
          <el-table-column align="center" label="互助状态" min-width="80" prop="">
              <template #default="scope">
                <span v-if="scope.row.aidState==1">待服务</span>
                <span v-else-if="scope.row.aidState==2">已派单</span>
                <span v-else-if="scope.row.aidState==3">已服务</span>
                <span v-else-if="scope.row.aidState==4">已审核</span>
              </template>
          </el-table-column>
          <el-table-column align="center" label="自愿者" min-width="130" prop="">
            <template #default="scope">
                {{ scope.row.volunteerMemberName }} / {{ scope.row.volunteerMemberPhone }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="现场图片" min-width="130" prop="">
            <template #default="scope">
              <div class="tableimgbox" v-if="scope.row.verifyImage">
                  <img :src="scope.row.verifyImage"/>
              </div>
          </template>
          </el-table-column>
          <el-table-column align="center" label="服务时间" width="160" >
            <template #default="scope">
              {{ formatDateLong(scope.row.serviceTime) }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="积分" min-width="130" prop="point" />
          <el-table-column align="center" label="审核人" min-width="80" prop="verifyUserName"/>
          <el-table-column align="center" label="审核时间" width="160" >
            <template #default="scope">
              {{ formatDateLong(scope.row.verifyTime) }}
            </template>
          </el-table-column>
          
          <el-table-column label="操作" width="80px" fixed="right">
            <template #default="scope" >
                <el-button v-if="scope.row.aidState==1 || scope.row.aidState==2" type="text" icon="promotion" size="small" @click="goAssign(scope.row,2)">派单</el-button>
                <el-button v-if="scope.row.aidState==3" type="text" icon="finished" size="small" @click="goExamine(scope.row,2)">审核</el-button>
            </template>
          </el-table-column>
        </c-table>
        <send-order v-if="assignFlag" v-model:show="assignFlag" title="互助派单" @success="getTableData" :type="opreatType" :editData="editData"/> 
        <examine v-if="examineFlag" v-model:show="examineFlag" title="互助审核" @success="getTableData" :type="opreatType" :editData="editData"/>
      </main-layout>
    </div>
  </template>
  
  <script setup>
  import { ref,onMounted } from 'vue'
  import {getServiceAidOrderList} from '@/api/service'

  import {ElMessageBox} from 'element-plus'
  
  import mainLayout from '@/components/custom/mainLayout.vue'
  import cTable from '@/components/custom/cTable.vue'
  import sendOrder from './components/sendOrder.vue'
  import examine from './components/examine.vue'
  
  import { useUserStore } from '@/pinia/modules/user'
  import {message} from '@/utils/element'
  import {formatDateLong} from '@/utils/format'

  const userStore = useUserStore()
  
  const pageIndex = ref(1)
  const total = ref(0)
  const pageSize = ref(10)
  const tableData = ref([])
  const searchInfo = ref({})
  const loading = ref(true)
  const assignFlag = ref(false)
  const tableRef = ref(null)
  const editData = ref({})
  const opreatType = ref(1)
  const time = ref('')
  const examineFlag = ref(false)

  onMounted(()=>{
    getTableData()
  })
  
  const onReset = () => {
    searchInfo.value = {}
  }
  // 搜索
  const onSubmit = () => {
    pageIndex.value = 1
    tableRef.value.clear_selection()  // 清空所选
    getTableData()
  }
  // 分页
  const handleSizeChange = (val) => {
    pageIndex.value = 1
    pageSize.value = val
    getTableData()
  }
  
  const handleCurrentChange = (val) => {
    pageIndex.value = val
    getTableData()
  }
  
  // 查询
  const getTableData = async () => {
    if(time.value){
      searchInfo.value.createTimeStart = time.value[0]
      searchInfo.value.createTimeEnd = time.value[1]
    }
    const res = await getServiceAidOrderList({ 
        pageNumber: pageIndex.value, 
        pageSize: pageSize.value, 
        ...searchInfo.value 
    })
    if (res.code == 0) {
      tableData.value = res.data.list
      total.value = res.data.total
    }
    loading.value = false
  }
  
  
  const goAssign = async (item,type)=>{
    opreatType.value = type
    editData.value = {...item}
    assignFlag.value = true
  }
  const goExamine = async (item,type)=>{
    opreatType.value = type
    editData.value = {...item}
    examineFlag.value = true
  }



  </script>
  
  <style lang="scss" scoped>
  .inputLine {
    display: flex;
    width: 200px;
    .zhi{
      padding: 0 10px;
    }
    s{
      font-style: normal;
      text-decoration: none;
      padding: 0 0 0 5px;
      color: var(--el-text-color-regular);
    }
  }
  </style>
  